<template>
    <div>
        <!-- list是已知的数据 -->
        <ks-select
            v-model="value"
            placeholder="请选择"
            :list="list"
            filterbale
        />

        <!-- list是未知的数据 我们需要调用接口 -->
        <ks-select
            v-model="value2"
            placeholder="请选择"
            api-url="/rest/vehicle/vehicle/list"
            :search-params="{
                searchKey:'filterLicenseNumber',
                page:1,
                size:30
            }"
            :response-transform-fn="responseTransformFn"
        />
    </div>
</template>
<script>

/** 
 * 
 * select 下拉组件
 * @author kim
 * @module @/commponents/ks-select 
 * @desc 基于element select 组件二次封装 为其更简单的使用
 * 
 * @param { String | Array } [ v-model ]    - value 通过value类型 组件自动判断 是否启用多选 Array 为多选，String为单选
 * @param { String } [ placeholder ]        - 占位符
 * @param { Srting } [ apiUrl ]             - 如果配置有接口请求地址 默认开启组件 模糊搜索
 * @param { Array } [ list ]                - 用于select默认下拉数据 格式务必为 [ {"value": "1", "label": "张三" }]
 * @param { boolean } [ filterbale ]        - 输入框是否可输入搜索
 * @param { boolean } [ disabled ]          - 是否禁用输入框
 * @param { Function } [ change ]           - 选中值发生变化时触发 , 接收一个是 { Object } item ;
 * @param { Object } [ searchParams ]       - 如果是模糊搜索 从后台接口拿数据 这个就是要请求携带的参数 {searchKey:123}  searchKey的value 就是搜索关键字的key 传递给后端的字端，添加 其他属性 默认自动带过去
 * @param { Function } [ responseTransformFn ]     - 后端返回的数据可能不能直接放到el-select 组件里 ， 需要我们自己转换 这个就是请求到数据的回调 
 *                                                 - 接收两个参数 { Object,Function } Object 是后端返回的数据 ， Function 接收一个参数 就是我们转换完的数据 
 * 
 * */ 


export default {
    data (){
        return {
            // 第一个组件
            value:"22",
            list:[ {"value": "22", "label": "Arkansas111" },{"value": "33", "label": "333" }],
            // 第二个组件
            value2:''
        }
    },
    methods:{
        responseTransformFn({list},setOptionsFn){
            setOptionsFn(list.map(({licenseNumber})=>{
                return {
                    value: licenseNumber,
                    label: licenseNumber 
                }
            }));
        }
    }
}
</script>



